import './index.css';
interface Data{
  dt?: String
  dd?: String
}
interface ChildComponentProps{
  onCancel?: Function
  text?: String
  data?: Data
}

export function Success(props: ChildComponentProps){
  return (
    <div className="reddem">
      <div className="success-main">
        <div className='message-header'>
          <img className='message-header-icon' src="../../assets/success-icon.png" alt="" />
          Success !
        </div>
        <div className='message-text'>{props.text}</div>
      </div>
    </div>
  )
}


export function Error(props: ChildComponentProps){
  return (
    <div className="reddem">
      <div className="error-main">
        <div className='message-header'>
          <img className='message-header-icon' src="../../assets/error-icon.png" alt="" />
          Error!
        </div>
        <div className='message-text'>{props.text}</div>
      </div>
    </div>
  )
}

export function Close(props: ChildComponentProps){
  return (
    <div className="reddem">
      <div className="close-main">
        <img className='close-icon' src="../../assets/close-icon.png" alt="" />
        <div className='close-text'>{props.text}</div>
        <div onClick={() =>{
          props.onCancel && props.onCancel()
        }} className='close-btn'>CLOSE</div>
      </div>
    </div>
  )
}


export function NotWallet(props: ChildComponentProps){
  return (
    <div className="reddem">
      <div className="error-main">
        <div className='message-header'>
          <img className='message-header-icon' src="../../assets/error-icon.png" alt="" />
          {props.text}
        </div>
      </div>
    </div>
  )
}



export function Earnings(props: ChildComponentProps){
  return (
    <div className="reddem">
      <div className="reddem-earnings">
        <img onClick={() =>{
          props.onCancel && props.onCancel()
        }} className='reddem-btn-close' src="../../assets/btn-close.png" alt="" />
        <img className="message-earnings-logo" src="../../assets/mo.png" alt="" />
        <div className='message-earnings-title'>Earnings</div>
        <div className="reddem-dl">
          <div className="reddem-dt">{props?.data?.dt}</div>
          <div className="reddem-dd">{props?.data?.dd}</div>
        </div>
      </div>
    </div>
  )
}



export function Melic(props: ChildComponentProps){
  return (
    <div className="reddem">
      <div className="reddem-melic">
        <img onClick={() =>{
          props.onCancel && props.onCancel()
        }} className='reddem-btn-close' src="../../assets/btn-close.png" alt="" />
        <img className="reddem-lipin" src="../../assets/huojiang.png" alt="" />
        <div className="message-earnings-num">{props.text}</div>
        <div className='message-earnings-title'>Melic</div>
      </div>
    </div>
  )
}
